<template>
    <div>
        <el-menu class="el-menu-vertical-demo" active-text-color="#106fc6" :unique-opened = "true"
            :default-active="onRoutes" :default-openeds="openeds" router>
            <template v-for="menu in menuData">
                <template v-if="hasPermission(menu.permission)">
                    <el-submenu :key="menu.id" :index="String(menu.path)" v-if="menu.children&&menu.children.length>0">
                        <template slot="title">
                            <i v-if="menu.icon" :class="menu.icon"></i>
                            <span>{{menu.name}}</span>
                        </template>
                        <menu-bar :menuData="menu.children"></menu-bar>
                    </el-submenu>
                    <el-menu-item class="first-menu" :key="menu.id" :index="menu.path" v-else>
                        <i v-if="menu.icon" :class="menu.icon"></i>
                        <span>{{menu.name}}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>
<script>
import menuBar from './menuBar.vue'
export default{
    name: 'menuBar',
    props: ['menuData'],
    components: {
        menuBar
    },
    data() {
        return {
            openeds: ['/researchData']
        }
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace("/index","");
        }
    },
    created() {
        
    },
    methods: {
        hasPermission(permission) {
            let str = sessionStorage.getItem('rightCodes')
            let rightCodes = JSON.parse(str)
            return rightCodes.includes(permission);
        }
    },
    watch: {
        $route(to,from) {
            // console.log(to,from,'ddddd')
        }
    }
}
</script>
<style lang="less" scoped>
    /deep/.el-menu{
        background: #106fc6;
        border-right: none;
        // .first-menu{
        //     color: #fff;
        //     i {
        //         color: #fff;
        //     }
        // }
        .el-submenu{
            .el-submenu__title{
                color: #fff;
                i {
                    color: #fff;
                }
            }
            .el-menu-item{
                padding-left: 40px!important;
            }
        }
        .is-opened{
            background: #f2f2f2;
            .el-submenu__title{
                color: #106fc6;
                i {
                    color: #106fc6;
                }
            }
            .el-menu-item{
                background: #f2f2f2;
            }
            .is-active{
                background: #e1ebf7;
            }
        }
        
        .el-submenu__title:hover{
            color: #106fc6;
            i {
                color: #106fc6;
            }
        }
    }
</style>